<template>
	<view>
		<tabsTop tabName="供应详情"></tabsTop>
		<sk-container v-if="form.Article_Name == undefined">
			<view class="guj" style="height: calc(100vh)">
				<sk-waterfall waterfall length:30></sk-waterfall>
			</view>
		</sk-container>
		<view class="content" v-else>
			<swiper circular class="swiper-box" autoplay :interval="3000">
				<swiper-item v-for="(item, index) in Swiper" :key="index" class="flex justify-center bg-white">
					<image v-if="Swiper.length != 0" :src="Domain_IMG + item" mode="aspectFit"
						style="width: 96%; border-radius: 25rpx" class="">
					</image>

				</swiper-item>
			</swiper>
			<view class="cont">
				<view class="item">
					<view class="name">
						<text class="text1">￥</text>
						<text class="text2">{{ Number(form.Amount).toFixed(2) }}元</text>
					</view>
					<view class="sangname">{{ form.Article_Name }}</view>
					<view class="foot">
						<view>已浏览{{ Browsing }}次</view>
						<view class="guig">已售出{{form.Sell_Quantity}}{{ form.Unit }}</view>
					</view>
				</view>
				<view class="item">
					<view class="way my-2 flex">
						<text class="text text-success">装运方式:</text>
						<view class="text" v-for="(item, index) in Transport" :key="index">{{ item.Transport_Name }}
						</view>
					</view>
					<view class="way my-2 flex">
						<text class="text text-success">支付方式:</text>
						<view class="text" v-for="(item, index) in Payment" :key="index">{{
              item.Payment_Name
            }}</view>
					</view>
					<view class="way my-2 flex">
						<text class="text text-success">交易方式:</text>
						<view class="text" v-for="(item, index) in Paystages" :key="index">{{ item.Trading_Explain }}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="specifications">
						<view class="text-success my-2"> 规格 </view>
						<view> 默认 </view>
						<view> {{ form.Amount }}元/{{ form.Unit }} </view>
						<view> {{ form.Starting_Quantity }}{{ form.Unit }}起批 </view>
					</view>
				</view>
				<view class="company">
					<view class="header">
						<view class="left">
							<!--    -->
							<image v-if="form.Enterprise_Logo != undefined" class="rounded-circle"
								style="width: 100%; height: 100%" :src="Domain_Business + form.Enterprise_Logo" mode="">
							</image>
						</view>
						<view class="right">
							<view class="title">{{ form.Enterprise_Name }}</view>
						</view>
					</view>
					<view class="cont">
						<button size="mini" @click="
                go(
                  '/pages/customerService/customerService?name=' +
                    form.Enterprise_Name +
                    '&Enterprise_Info_SerialNumber=' +
                    form.Enterprise_Info_SerialNumber
                )
              ">
							联系对方
						</button>
						<button size="mini" @click="go('/pages/index/Traceabilityservices')">
							溯源查看
						</button>
					</view>
				</view>
				<view class="item" v-if="Detail != 0">
					<view class="xiangq">
						<view class="I mr-2"></view>
						商品详情
						<view class="I ml-2"> </view>
					</view>
					<view class="cont">
						<view class="flex flex-column mx-10 py-4 w-100" style="height: 100%">
							<view v-for="item in Detail" :key="item.Article_PicNumber" style="width: 100%">
								<image v-if="item.Picture_URL != undefined" style="width: 100%"
									:src="Domain_IMG + item.Picture_URL" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
				</view>
				<!-- 交易说明 -->
				<view class="item footer">
					<view class="xiangq">
						<view class="I mr-2"></view>
						交易说明
						<view class="I ml-2"> </view>
					</view>
					<view class="item">
						<TransactionDescription></TransactionDescription>
					</view>
				</view>
				<!-- 立即购买 -->
				<view class="button">
					<button class="btn" v-if="
              form.Enterprise_Info_SerialNumber !=
              Enterprise_Info_SerialNumber
            " @click="
              handleTabs(
                '/pages/Market/MarketOrder?Group_Seek_Purchase_SerialNumber=' +
                  Group_Purchasing_SerialNumber
              )
            ">
						立即购买
					</button>
					<button class="btn" v-else>本企发布</button>
				</view>
			</view>
		</view>
		<tabsBottom></tabsBottom>
	</view>
</template>

<script>
	const app = getApp();
	import TransactionDescription from "@/components/TransactionDescription.vue";
	import Tradingchat from "@/components/Tradingchat2/Tradingchat.vue";
	import {
		GroupProcureID,
		GroupServesHistory
	} from "@/api/group.js";
	import {
		GoodsFileAdd,
		getAddAction
	} from "@/api/global.js";
	import times from "@/static/js/utils.js";
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	export default {
		name: "MarketDetail",
		components: {
			tabsTop,
			tabsBottom,
		},
		data() {
			return {
				Domain_Business: app.globalData.Domain_Business,
				token: "",
				Group_Purchasing_SerialNumber: "",
				Domain_IMG: app.globalData.Domain_IMG,
				show: false,
				hide: false,
				Enterprise_Info_SerialNumber: "",
				form: {},
				Data: {},
				Detail: [],
				Swiper: [],
				Payment: [],
				Shipment: [],
				Transport: [], //运输方式
				Paystages: [], //交易方式
				Browsing: "", //浏览次数
				num: 0,
				min: 0,
				max: 0,
				Quantity: 0,
				Whether: true,
				BrowseHistory: {
					Group_Browse_SerialNumber: "",
					Group_SerialNumber: "",
					Group_Browse_Path: "",
					Group_Type: "1",
					Group_Browse_Date: times.nowtime(),
					User_Number: "",
				},
			};
		},
		components: {
			Tradingchat,
			TransactionDescription,
		},

		onLoad(e) {
			this.Enterprise_Info_SerialNumber = uni.getStorageSync("enterprise");

			this.Group_Purchasing_SerialNumber = e.Group_Purchasing_SerialNumber;

			console.log(e.Group_Purchasing_SerialNumber);

			let token = uni.getStorageSync("token");

			this.getData(this.Group_Purchasing_SerialNumber);

			this.BrowseHistory.User_Number = uni.getStorageSync("use");

			this.BrowseHistory.Group_SerialNumber = e.Group_Purchasing_SerialNumber;
			//获取路径
			let pages = getCurrentPages();

			let currentPage = pages[pages.length - 1];

			this.BrowseHistory.Group_Browse_Path = currentPage.route;

			this.getAddHistory();
		},
		methods: {
			async getAddHistory() {
				let data = {
					Data: JSON.stringify({
						group_browsing_info: [this.BrowseHistory],
					}),
				};
				const res = await getAddAction(data);
				console.log(res);
			},
			go(url) {
				uni.navigateTo({
					url,
				});
			},

			async getData(Group_Purchasing_SerialNumber) {
				const res = await GroupProcureID({
					Group_Purchasing_SerialNumber
				});
				if (
					(res.redirect && res.redirect == "REDIRECT") ||
					(res.REDIRECT && res.REDIRECT == "REDIRECT")
				) {
					uni.showModal({
						title: "登录已失活",
						content: "系统检测到您未登录或登录超时",
						cancelText: "暂不登录",
						confirmText: "去登陆",
						success(res) {
							if (res.cancel) {
								uni.switchTab({
									url: "/pages/index/index",
								});
							}
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/My/Login?LoginUrl=" + this.LoginUrl,
								});
							}
						},
					});
					return;
				} else if (res.Status == "success") {
					this.form = res.Data;
					console.log(this.form);
					this.Data = res;
					console.log(res, '看看有没有图片路径');
					if (
						parseInt(res.Data.Starting_Quantity) <
						parseInt(res.Data.Residue_Quantity)
					) {
						this.Quantity = res.Data.Starting_Quantity;
					} else {
						this.Quantity = res.Data.Residue_Quantity;
					}
					if (!res.hasOwnProperty("Swiper")) {
						this.Swiper.push(res.Data.Picture_URL);
					} else {
						this.Swiper = res.Swiper;
					}
					this.Detail = res.Detail;
					this.Payment = res.Payment;
					this.Shipment = res.Shipment;
					this.Transport = res.Transport;
					this.Paystages = res.Paystages;
					this.Browsing = res.Browsing;
					console.log(res);
				}
			},
			//商品购买校验
			handleTabs(url) {
				if (uni.getStorageSync("token") == "") {
					uni.showModal({
						title: "平台通知",
						content: "你还没有登录,是否前往登录",
						cancelText: "我再想想",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/My/Login",
								});
							}
						},
					});
					return;
				}
				const authentication = uni.getStorageSync("authentication");

				if (authentication != "") {
					uni.navigateTo({
						url: "/pages/Market/MarketOrder?Goods=" +
							encodeURIComponent(JSON.stringify(this.form)) +
							"&num=" +
							this.Quantity +
							"&data=" +
							encodeURIComponent(JSON.stringify(this.Data)),
					});
				} else {
					uni.showModal({
						title: "平台通知",
						content: "你还没有认证,是否前往认证",
						cancelText: "我再想想",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/My/Certificate_services",
								});
							}
						},
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	.content {
		width: 100%;
		background-color: #f5f5f5;
		padding-bottom: 1px;

		.swiper-box {
			height: 240px;
		}

		.item {
			background: #fff;
			margin: 20rpx 20rpx 0;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 20rpx;
			box-sizing: border-box;

			.name {
				color: #ff442f;

				.text1 {
					font-size: 26rpx;
					letter-spacing: 0;
					font-weight: 500;
					padding-bottom: 8rpx;
				}

				.text2 {
					font-size: 54rpx;
					letter-spacing: 0;
					line-height: 74rpx;
					font-weight: 500;
				}
			}

			.sangname {
				font-size: 16px;
				color: #111;
				letter-spacing: 0;
				line-height: 26px;
				font-weight: 600;
				margin: 0 0 15rpx 0;
			}

			.foot {
				display: flex;
				font-size: 24rpx;
				justify-content: space-between;
			}

			.guig {
				padding: 20rpx;
				box-sizing: border-box;
				height: 45rpx;
				background: #fff0ef;
				border-radius: 18rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				display: flex;
				align-items: center;
				color: #ff442f;
				border-top: 1px solid #f5f5f5;
			}

			.way {
				font-size: 28rpx;

				.text {
					font-weight: bold;
					display: inline-block;
					margin: 0 10rpx 0 0;
				}
			}

			.specifications {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.xiangq {
				display: flex;
				align-items: center;
				justify-content: center;

				.I {
					width: 50px;
					height: 0.5px;
					background: #ddd;
				}
			}
		}

		.company {
			margin: 20rpx 20rpx 0;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;
			padding: 12px 10px;
			background-image: linear-gradient(90deg,
					rgba(187, 215, 255, 0.4),
					rgba(89, 130, 255, 0.3));
			border-radius: 20rpx;

			.header {
				display: flex;
				align-items: center;
				margin: 0 0 20rpx 0;
			}

			.cont {
				display: flex;
			}

			.left {
				width: 108rpx;
				height: 108rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.right {
				.title {
					font-size: 30rpx;
					color: #111;
					text-align: left;
					line-height: 40rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 30rpx;
				}
			}
		}

		.button {
			padding: 20rpx 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: -1px;
			left: 0;
			width: 100%;
			box-sizing: border-box;

			.btn {
				font-size: 32rpx;
				text-align: center;
				line-height: 32rpx;
				display: block;
				padding: 24rpx 0;
				background: #28a745;
				border-radius: 80rpx;
				color: #fff;
				width: 320rpx;
			}

			.cal {
				background-color: #f39147;
			}
		}

		.footer {
			// margin: 0 0 100rpx 0;
			margin-bottom: 150rpx;
		}
	}
</style>